<template>
  <div>
    <div class="main">
      <p class="title">商家基本信息</p>
      <div class="form">
        <el-form :model="ruleForm"
                 :rules="rules"
                 ref="ruleForm"
                 label-position='left'
                 label-width="130px">
          <el-form-item label="商家名称"
                        prop="name">
            <el-input v-model="ruleForm.name"
                      :disabled='isdisabel'></el-input>
          </el-form-item>
          <el-form-item label="商家简介"
                        prop="introduce">
            <el-input type="textarea"
                      v-model="ruleForm.introduce"></el-input>
          </el-form-item>
          <el-form-item label="门店电话"
                        prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="营业时间"
                        prop="startAt">
            <el-input v-model="ruleForm.startAt"></el-input>
          </el-form-item>
          <el-form-item label="规模"
                        prop="subheading">
            <el-input v-model="ruleForm.subheading"></el-input>
          </el-form-item>
          <el-form-item label="门店地址"
                        prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="营业资质"
                        prop="shareImg"
                        required>
            <el-upload class="avatar-uploader"
                       :action="baseUrl+'/common/upload'"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload"
                       :on-progress="progressUpload"
                       :v-loading="loading">
              <img v-if="ruleForm.shareImg"
                   :src="ruleForm.shareImg"
                   class="avatar">
              <i v-else
                 class="avatar el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="店铺LOGO"
                        prop="shareImg"
                        required>
            <el-upload class="avatar-uploader"
                       :action="baseUrl+'/common/upload'"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess1"
                       :before-upload="beforeAvatarUpload"
                       :on-progress="progressUpload"
                       :v-loading="loading">
              <img v-if="ruleForm.img"
                   :src="ruleForm.img"
                   class="avatar">
              <i v-else
                 class="avatar el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="负责人姓名"
                        prop="coordinate">
            <el-input v-model="ruleForm.coordinate"></el-input>
          </el-form-item>
          <el-form-item label="联系方式"
                        prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="submitForm('ruleForm')">修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      baseUrl: "",
      isdisabel: false,
      ruleForm: {},
      rules: {
        name: [{ required: true, message: '请输入商家名称', trigger: 'blur' },
        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
        introduce: [{ required: true, message: '请输入商家简介', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入门店电话', trigger: 'blur' }],
        startAt: [{ required: true, message: '请输入营业时间', trigger: 'blur' }],
        subheading: [{ required: true, message: '请输入规模', trigger: 'blur' }],
        address: [{ required: true, message: '请输入门店地址', trigger: 'blur' }],
        coordinate: [{ required: true, message: '请输入负责人姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
      },
      loading: false
    }
  },
  mounted () {
    this.baseUrl = this.$baseUrl;
    this.getInfo();
  },
  methods: {
    // 获取店铺信息
    getInfo () {
      const that = this;
      this.$getRequest("/shop/shop/" + sessionStorage.getItem("shopId"), {}).then(res => {
        if (res.data.shopShop.name && res.data.shopShop.name != "") {
          that.isdisabel = true;
        }
        that.ruleForm = res.data.shopShop;
      })
    },
    handleAvatarSuccess (res) {
      if (res.code == 200) {
        this.ruleForm.shareImg = res.msg;
        this.loading = false;
        this.$forceUpdate();
      } else {
        this.$message.arror(res.msg)
      }
    },
    handleAvatarSuccess1 (res) {
      if (res.code == 200) {
        this.ruleForm.img = res.msg;
        this.loading = false;
        this.$forceUpdate();
      } else {
        this.$message.arror(res.msg)
      }
    },
    beforeAvatarUpload (file) {
      var name = file.name;
      var ext = name.substr(name.lastIndexOf('.') + 1)
      var flag = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1
      if (!flag) {
        this.$message.error('请上传正确的图片')
      }
      return flag
    },
    progressUpload () {
      this.loading = true;
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.shareImg == "") {
            this.$message.error("请上传营业资质")
          } else if (this.ruleForm.img == "") {
            this.$message.error("请上传店铺LOGO图")
          } else {
            this.$setRequest("/shop/shop", {
              id: this.ruleForm.id,
              introduce: this.ruleForm.introduce,
              mobile: this.ruleForm.mobile,
              address: this.ruleForm.address,
              startAt: this.ruleForm.startAt,
              subheading: this.ruleForm.subheading,
              coordinate: this.ruleForm.coordinate,
              shareImg: this.ruleForm.shareImg,
              img: this.ruleForm.img,
              phone: this.ruleForm.phone
            }, "put").then(res => {
              if (res.code == 200) {
                this.$message.success("修改成功");
              }
            })
          }
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 20px;
  background: #fff;
  .title {
    font-size: 18px;
    padding: 0 20px;
    line-height: 60px;
    border-bottom: 1px solid #eee;
  }
  .form {
    width: 50%;
    padding: 20px;
    .avatar {
      height: 150px;
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #dcdfe6;
    }
  }
}
/deep/ .el-input.is-disabled .el-input__inner,
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  color: #333;
}
/deep/ .el-button--primary {
  background-color: #0655ce;
  border-color: #0655ce;
}
</style>